
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <?php
    require_once 'Private/Peticiones/pcInicio.php';
        $lstSedes= ejecutarCons($_SESSION['sede']);       
    ?>
    <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/Sofarum/resources/jquery-1.6.4.js"></script>
<script type="text/javascript" src="/Sofarum/resources/jquery.cycle.all.js"></script>

<script type="text/javascript">
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var latlng;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer()    
    latlng = new google.maps.LatLng(<?php echo $lstSedes->get(0)->getLatitud()?>,<?php echo $lstSedes->get(0)->getLongitud()?>);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    var marker = new google.maps.Marker({
      position: latlng,
      map:map,
      title:"Hello World!"
  });
  directionsDisplay.setMap(map);
  setTimeout(function() {

      //Inicializa el efecto de cambio entre pestañas
  $('#contenido')
                .before('<div id="nav">')
                .cycle({
                    fx:     'turnDown',
                    speed:  'fast',
                    timeout: 0,
                    pager:  '#nav',
                    pagerAnchorBuilder: function(idx, slide) {
                     document.getElementById("informacion").style.visibility="visible";
                     document.getElementById("localizacion").style.visibility="visible";
                     return '<a href="#">' + slide.id + '</a>';
                    }
                });



    },300);
  

  }

  function calcRoute() {
  var start = document.getElementById("start").value;
  var end = latlng ;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }else{
        alert("La direccion introducida no es correcta")
    }
  });
}


</script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
</head>


<body onload="initialize()">

        
        <div id="contenido" style="width:1024px; height:764px; visibility:hidden;">
            
            <div id="informacion">
                <div id="texto"><?php echo $lstSedes->get(0)->getDescripcion();?></div>
                <div id="imagen"><img src="<?php echo $lstSedes->get(0)->getCodImagen();?>" alt="Imagen no disponible"/></div>
            </div>
        
            <div id="localizacion" style=" visibility:hidden;">
                    <div id="map_canvas" style="width:1024px; height:764px;"></div>

                    <input type="text" size="43" id="start" name="from" value=""/>
                    <input type="button" value="Calcula la ruta" onclick="calcRoute()">
            </div>
   
        </div>
          <?php include 'include/cabecera.php'; ?>
      <?php include 'include/menu.php'; ?>
    </body>
</html>
